<template>
  <!-- 活动管理下的活动详情里的:评论对话框 -->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="activeForm">

            <!-- 这里显示活动的信息 -->
            <el-carousel height="400px">
              <el-carousel-item v-for="item,index in pictureList" :key="index">
                <div style="margin: auto;">
                  <el-image
                    style="height: 100%;width: 100%;"
                    :src="item"
                    fit="fill"></el-image>
                </div>
                </el-carousel-item>
            </el-carousel>

            <el-descriptions :column="3" border>
              <el-descriptions-item label="活动名称">{{ activeForm.active_name}}</el-descriptions-item>
              <el-descriptions-item label="活动地址">{{ activeForm.active_address }}</el-descriptions-item>
              <el-descriptions-item label="发起人">{{ activeForm.active_employee_name }}</el-descriptions-item>
              <el-descriptions-item label="开始时间">
                <el-tag size="small">{{ activeForm.start_time }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="结束时间">
                <el-tag size="small">{{ activeForm.end_time }}</el-tag>
              </el-descriptions-item>

              <el-descriptions-item label="活动状态">
                <el-button
                  size="mini"
                  type="success"
                  >{{ activeForm.status }}</el-button>
              </el-descriptions-item>

              <el-descriptions-item label="活动内容">
                {{ activeForm.context }}
              </el-descriptions-item>


              <el-descriptions-item label="活动总结">
                {{ activeForm.summary }}
              </el-descriptions-item>

            </el-descriptions>
        
          <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                align="left">
                <template slot-scope="scope">
                  <!-- 这里显示评论信息 -->
                  <div style="display: flex;align-items: center;">
                    <img 
                      :src="scope.row.comment_photo" alt="头像"
                      style="height: 50px;width: 50px;border-radius: 50%;">
                    <div style="margin-left: 2%;">{{ scope.row.comment_name }}</div>
                    <el-tag style="margin-left: 3%;">{{ scope.row.status }}</el-tag>
                  </div>
                  <div style="margin-top: 1%;font-size: 17px;">
                    {{ scope.row.context }}
                  </div>
                  <div style="margin-top: 1%;font-size: 14px;color: #999;">
                    {{ scope.row.comment_time }}
                  </div>
                  
                </template>
              </el-table-column>
          </el-table>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入评论"
          v-model="textarea"
          style="margin-bottom: 10px;">
        </el-input>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="commentAdd()">发 送</el-button>
      </div>

  </el-dialog>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    export default {
        name:'DetailActiveCommentDialogBox',
        props:['tableData','activeForm'],
        data() {
          return {
            // 评论内容
            textarea:'',
            // 控制对话框的显示
            dialogFormVisible:true,
            // 轮播图数据
            pictureList:[]

          }
        },
        methods:{
            // 发送评论
            commentAdd(){
              const obj = {
                active_id:this.activeForm.id,
                context:this.textarea
              }
              myAxios(
                'http://localhost:8088/admin/addcomment',
                'post',
                Qs.stringify(obj),
                (data)=>{
                  // 提示一下
                  this.$message({
                      message: '发送成功!',
                      type: 'success'
                  });
                  this.$router.push({path:'/home/detailActive'})
                }
              )
            }

        },
        watch:{
          // 监听对话框的关闭和展开(关闭后切换路由)
          dialogFormVisible(newValue,oldValue){
            if(!newValue){
              this.$router.push({path:'/home/detailActive'})
            }
          }
        },
        mounted(){
          // 给轮播图赋值
          this.pictureList = [this.activeForm.active_image_one,this.activeForm.active_image_two];
        },
    }
</script>

<style lang="less" scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
.el-carousel{
  margin-top: -40px;
  margin-bottom: 8px;
}
</style>